<template>
	<div class="content boxFlex">
		<div class="leftInfo">
			<!-- <div class="searchBox"> -->
				<!-- <el-input placeholder="请输入内容" v-model="searchInputValue" @change="searchData">
					<i slot="prefix" class="el-input__icon el-icon-search"></i>
				</el-input> -->
			<!-- </div> -->
			<!-- <div class="sliding">
				<div class="slidingBox" @click="cutSliding(1)" :class="slidingIndex.treeNavIndex == 1?'slidingBoxSelect':''">组织架构</div>
				<div class="slidingBox" @click="cutSliding(2)" :class="slidingIndex.treeNavIndex == 2?'slidingBoxSelect':''">角色</div>
			</div> -->
			<!-- <div class="role">
				<el-button round>新增角色组</el-button>
				<el-button round>新增角色</el-button>
			</div> -->
			<!-- 树形菜单 -->
			<leftMenu :key="menuKey"></leftMenu>
			<!-- <tree ref="treeBox"></tree> -->
		</div>
		<div class="rightContent">
			<section class="section">
				<transition name="fade" mode="out-in">
					<LayoutChild :key="selectCompanyIdKey"></LayoutChild>
				</transition>
			</section>
		</div>
	</div>
</template>

<script>
	import leftMenu from './components/leftMenu.vue'
	// import tree from './components/tree.vue'
	// import personnelTable from './components/personnelTable.vue'
	// import memberTable from './components/memberTable.vue'
	import LayoutChild from './layout.vue'
	export default {
		components:{
			leftMenu,
			// tree,
			// personnelTable,
			// memberTable,
			LayoutChild
		},
		data() {
			return {
				// userInfo: '',
				// slidingIndex: this.$store.state.addressList, // 组织架构和角色间的切换
				// searchInputValue: '', // 
				// searchTableFormData:{
				// 	name: '',
				// 	jobNum: '',
				// 	phone: ''
				// },
				menuKey: '0' ,// 视图key值
				selectCompanyIdKey: '0'
			}
		},
		computed: {
			companyId () {
				return this.$store.state.company.companyId
			},
			selectCompanyId () {
				return this.$store.state.navState.selectCompanyId
			}
		},
		watch:{
			companyId (newData) {
				this.menuKey = new Date().getTime() // 视图key值
				this.$router.push(`/myteam/teaminfo/teamlist?t=${new Date().getTime()}`)
			},
			selectCompanyId (newData) {
				this.selectCompanyIdKey = new Date().getTime() // 视图key值
				// this.$router.push(`/myteam/teaminfo/teamlist?t=${new Date().getTime()}`)
			}
		},
		methods: {
			// cutSliding(i) {
			// 	// 组织架构和角色间的切换
			// 	// console.log(this.slidingIndex.treeNavIndex)
			// 	this.$store.commit('set_treeNavIndex', i)
			// 	let treeIndex = this.slidingIndex.treeNavIndex
			// 	// this.slidingIndex = i
			// 	this.$refs.treeBox.treeClick()
			// 	if (treeIndex == 1) {
			// 		this.$router.replace('/addresslist/interior/addresslistmanage')
			// 	} else if (treeIndex == 2) {
			// 		this.$router.replace('/addresslist/interior/role')
			// 	}
			// },
			// searchData(){
			// 	// 搜索
			// 	console.log(this.searchInputValue)
			// }
		}
	}
</script>

<style scoped="scoped">
	/* .content{
		padding: 20px 0;
	} */
	.leftInfo {
		width: 240px;
		padding: 20px 0;	
		background: #F8F8F8;
		border-right: 1px solid #DCDCDC;
		border-radius: 8px 0 0 8px;
		z-index: 5;
	}

	.rightContent {
		width: 960px;
		/* padding: 20px; */
	}

	.searchBox {
		padding: 0 10px;
		margin-bottom: 20px;
	}

	.sliding {
		width: 220px;
		height: 34px;
		line-height: 34px;
		background: #E7EBE9;
		border-radius: 32px;
		overflow: hidden;
		display: flex;
		justify-content: space-between;
		flex-wrap: nowrap;
		margin-left: 10px;
		margin-bottom: 10px;
	}

	.slidingBox {
		width: 110px;
		text-align: center;
		color: #333333;
		cursor: pointer;
	}

	.slidingBoxSelect {
		background: #24B14E;
		color: #FFFFFF;
	}
	.role{
		padding: 15px 26px;
		padding-top: 5px;
	}
	
</style>
